<div class="row mb-3">
    <div class="col-12">
        <div class="card mb-4">
            <div class="card-body">

                <filter-list request="request" create-url="'/portal/theme/create'" callback="getList(pageIndex)"
                    create-text="'Upload Theme'">
                </filter-list>

                <hr>

                <table class="table table-sm table-hover" cellspacing="0">
                    <thead class="thead-light">
                        <tr>
                            <!-- <th scope="col" width="5px">
                                <small class="fa fa-grip-vertical text-black-50 align-middle"></small>
                            </th> -->
                            <th scope="col">
                                Title
                            </th>
                            <th scope="col">
                                Name
                            </th>
                            <th scope="col">
                                Version
                            </th>
                            <th scope="col" width="15%">
                                Image
                            </th>
                            <th scope="col" width="10%">
                                Author
                            </th>
                            <th scope="col" width="20%">
                                Created Date
                            </th>
                            <th scope="col" width="15%" class="text-right">
                            </th>
                        </tr>
                    </thead>

                    <tbody class="sortable" ng-init="getList()">
                        <tr ng-repeat="item in data.items track by $index" class="sortable-item" sort-model="theme"
                            sort-model-id="{{item.id}}">
                            <!-- <td style="cursor:grab;" class="drag-header">
                                <small class="fa fa-grip-vertical text-black-50 align-middle"></small>
                            </td> -->
                            <td class="">
                                <small>{{item.title}}</small>
                            </td>
                            <td class="text-black-50 align-middle">
                                <small>???</small>
                            </td>
                            <td class="text-black-50 align-middle">
                                <small>v???</small>
                            </td>
                            <td>
                                <img height="30" imageonload ng-src="{{item.imageUrl}}">
                            </td>
                            <td>
                                <small class="text-black-50 align-middle">{{item.createdBy}}</small>
                            </td>
                            <td>
                                <small class="text-black-50 align-middle">
                                    {{item.createdDateTime | utcToLocal:'dd/MM/yyyy hh:mm a'}}
                                </small>
                            </td>
                            <td>
                                <div class="btn-group btn-group-sm btn-group-sm float-right" role="group"
                                    aria-label="Actions">
                                    <a ng-if="item.previewUrl" href="{{item.previewUrl}}" target="_blank"
                                        class="btn btn-link text-primary">
                                        <span class="fas fa-eye"></span>
                                    </a>
                                    <a href="/portal/template/list/{{item.id}}" class="btn btn-link text-primary">
                                        <span class="fas fa-paint-brush"></span>
                                    </a>
                                    <a href="/portal/file/list?folder={{item.assetFolder}}"
                                        class="btn btn-link text-primary">
                                        <span class="fas fa-file"></span>
                                    </a>
                                    <a href="/portal/theme/export/{{item.id}}"
                                        class="btn btn-sm btn-link d-inline-block text-primary">
                                        <span class="fas fa-arrow-down"></span></a>

                                    <a ng-click="syncTemplates(item.id)"
                                        class="btn btn-sm btn-link d-inline-block text-primary"><span
                                            class="fas fa-sync-alt"></span></a>
<!-- 
                                    <a ng-click="shareTemplates(item.id)"
                                        class="btn btn-sm btn-link d-inline-block text-primary"><span
                                            class="fas fa-cloud-upload-alt"></span></a> -->

                                    <a href="/portal/theme/details/{{item.id}}" class="btn btn-link text-primary">
                                        <span class="fas fa-pen"></span>
                                    </a>

                                    <a ng-click="remove(item.id);" class="btn btn-link text-danger">
                                        <span class="fas fa-trash-alt"></span>
                                    </a>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <div class="card-footer">


                <paging class="small" page="data.page" page-size="data.pageSize" total="data.totalItems"
                    ul-class="pagination justify-content-end m-0" a-class="page-link" paging-action="getList(page-1)"
                    scroll-top="true">

                    <!-- <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-end m-0">
            <li class="page-item">
                <a class="page-link active" href="javascript:void(0)" ng-click="getList(data.pageIndex-1)"
                    ng-hide="data.pageIndex==0">Prev</a>
            </li>
            <li class="page-item" ng-class="{active: n-1==data.pageIndex}" ng-repeat="n in range(data.totalPage)">
                <a class="page-link" href="javascript:void(0)" ng-click="getList(n-1)">{{n}}</a>
            </li>
            <li class="page-item">
                <a class="page-link" href="javascript:void(0)" ng-click="getList(data.page)"
                    ng-hide="data.pageIndex >= (data.totalPage-1)">Next</a>
            </li>
        </ul>
    </nav> -->
            </div>
        </div>

    </div>
</div>